<template>
<div>
  <el-card class="out-box" shadow="never">
    <div class="isShowName">
      <span style="margin-right: 2%;">是否显示预约名字</span>
      <el-switch
        @change="update()"
        v-model="value"
        active-color="#13ce66"
        inactive-color="gray">
      </el-switch>
    </div>
    <div class="changeAppointNum">
      <span style="margin-right: 2%;">是否放号</span>
      <el-switch
        @change="update()"
        v-model="value1"
        active-color="#13ce66"
        inactive-color="gray">
      </el-switch>
    </div>
    <div class="changeAppointNum">
      <span style="margin-right: 2%;">放号时间</span>
      <el-time-picker
        @change="update"
        v-model="time"
        placeholder="放号时间点">
      </el-time-picker>
    </div>
   <div class="changeAppointNum">
     <span style="margin-right: 2%;">每日每人预约次数</span>
     <el-input-number v-model="count" @change="update" :min="1" :max="10" label="描述文字"></el-input-number>
   </div>
    <div class="changeAppointNum">
      <span style="margin-right: 2%;">预约产品模块名称</span>
      <el-input v-model="name" class="inputName" clearable maxlength="16" placeholder="请输入预约产品模块名称内容"></el-input>
      <el-button type="primary" size="small" @click="update">确认修改</el-button>
    </div>
    <div style="display: flex;width: 60%;margin-top: 5%;">
      <div style="margin-right: 2%;">预约产品模块图片</div>
      <img :src="product.url" style="width: 150px;height: 150px;margin-left:0;" class="picture">
      <img src="https://img.osako.top/img/FuDMaKMofWgfDwT9yozLP5-C83B2" style="width: 150px;height: 150px;" class="change-icon">
      <el-upload
        action="https://hospital.osako.top/massage/picture/upload"
        list-type="picture-card"
        :file-list="fileList"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
        :on-change="handlePhoto"
        :class="{hide:hideUpload}"
        v-loading.fullscreen.lock="fullscreenLoading">
        <i class="el-icon-plus"></i>
      </el-upload>
    </div>

  </el-card>

</div>
</template>

<script>
import {getConfig,updateConfig} from "@/api/config";
import {getToken} from "@/utils/auth";
import axios from "axios";
import {dateFormYMD} from "@/common/js/dateFormYMD";
import {addProduct} from "@/api/product";
import {tips} from "@/common/js/optionTips";
import {DateToTime} from "@/common/js/timeFilters";

export default {
  name:"isShowName",
  data() {
    return {
      //产品名称
      name:'',
      //放号时间
      time:'',
      //预约数量
      count:'',
      //记录显示预约名字按钮的值
      value: '',
      //记录是否放号按钮的值
      value1: '',
      //是否显示预约名字
      isShowName: '',
      //是否放号
      isRelease:'',
      product:{
        url:'',
        isEdit:false,
      },
      imgUrl:'',
      dialogVisible: false,
      fileList: [],
      hideUpload: false,
      fullscreenLoading: false, // 进行整个屏幕的加载的
    }
  },
  methods:{
    // 当上传了一张照片上去
    handlePhoto: function (file, fileList) {
      this.imgFile = file;
      this.hideUpload = fileList.length >= 1;
      this.uploadPicture()
      this.handleRemove(this.imgFile,this.fileList)
    },
    // 删除上传的照片
    handleRemove(file, fileList) {
      if (fileList.length === 0) {
        this.fileList = []
      } else {
        let dl = this.fileList.indexOf(file);
        this.fileList.splice(dl, 1)
      }
      this.hideUpload = fileList.length >= 1
    },
    handlePictureCardPreview(file) {
      this.imgUrl = file.url;
      this.dialogVisible = false;
    },
    //上传图片
    uploadPicture: function() {
      this.fullscreenLoading = true;
      const url = 'https://hospital.osako.top/massage/picture/upload';
      const config = {
        headers: {
          'Content-Type': 'multipart/form-data',
          'Authorization': getToken()
        }
      };
      const param = new FormData();
      // 将图片加入formdata
      param.append('file', this.imgFile.raw);
      axios.post(url, param, config).then(res => {
        if (res.data.code === 200) {
          this.fullscreenLoading = false;
          this.product.url = res.data.data
          this.dialogVisible = false;
          this.update()
        }
      }).catch(() => {
        this.fullscreenLoading = false;
        tips('error','添加失败')
      });
    },
    update:function (){
      this.isShowName = this.value === true ? 1 : 0
      this.isRelease = this.value1 === true ? 1 : 0
      if(this.name === ''){
        tips('error','预约产品模块名称不能为空哦')
        return;
      }
      updateConfig(1,this.isShowName,this.count,this.product.url,DateToTime(this.time,'hour'),this.isRelease,this.name).then(res=>{
        if(res.code === 200){
          this.$notify({
            title: '成功',
            message: '修改成功',
            type: 'success'
          });
        }
      })
    },
    getConfig: function (){
      getConfig().then(res=>{
        if(res.code === 200){
            let time = res.data.time.split(':')
            this.isShowName = parseInt(res.data.isShow)
            this.isRelease = res.data.action
            this.value = this.isShowName === 1
            this.value1 = this.isRelease === 1
            this.count = parseInt(res.data.count)
            this.product.url = res.data.url
            this.time = new Date().setHours(time[0],time[1])
            this.time = new Date(this.time)
            this.name = res.data.name
        }
      })
    }
  },
  created() {
    this.getConfig()
  }
};
</script>

<style>
.inputName{
  width: 20%;
  margin-right: 2%;
}
.isShowName{
  width: 100%;
  height:5%;
  display: flex;
}
.changeAppointNum{
  width: 100%;
  height:5%;
  margin-top: 5%;
  display: flex;
}
@media screen and (max-width: 1000px) {
  .inputName{
    width: 80%;
    margin-right: 2%;
  }
  .isShowName{
    float: left;
    width: 32%;
    height:5%;
  }
  .changeAppointNum{
    width: 62%;
    height:5%;
    margin-top: 10%;
  }
}
</style>
